import React, { useState } from "react";
import "./Todolist.css";
import { nanoid } from "nanoid";

import Todoheader from "../../components/Todoheader/Todoheader";
import Todomain from "../../components/Todomain/Todomain";
import Todofooter from "../../components/Todofooter/Todofooter";
import { useEffect } from "react";
import axios from "../../http/http";
import {
	getAlltodo,
	reqAddtodo,
	reqDeleteTodo,
	reqUpdateTodo,
	reqClearALL,
	reqCheckedAll,
} from "../../api/todo";

export default function Todolist() {
	//创建状态
	let [todo, setTodo] = useState([]);

	// 新增一个todo
	let addTodo = async (title) => {
		//发送请求
		let data = await reqAddtodo({
			done: false,
			title,
		});
		// console.log(data);
		//设置新的数据
		setTodo([...todo, data]);
	};

	//删除一个todo
	let removeTodo = async (id) => {
		//发送删除请求
		await reqDeleteTodo(id);
		//过滤
		let newtodo = todo.filter((item) => {
			if (item.id !== id) {
				return item;
			}
		});
		setTodo(newtodo);
	};

	// 修改某个todo 完成
	let updateTodo = async (id, done) => {
		// id  done
		//发送请求,修改
		await reqUpdateTodo(id, done);

		let newtodo = todo.map((item) => {
			if (item.id === id) {
				item.done = !item.done;
			}
			return item;
		});
		//设置新数据
		setTodo(newtodo);
	};

	// 清除全部已完成
	let clearAlltodo = async () => {
		//批量处理
		await reqClearALL(todo);

		let newtodo = todo.filter((item) => item.done === false);
		setTodo(newtodo);
	};

	//全选与取消全选
	let checkedalltodo = async (done) => {
		//批量请求
		await reqCheckedAll(todo, done);

		let newtodo = todo.map((item) => {
			item.done = done;
			return item;
		});
		setTodo(newtodo);
	};

	useEffect(() => {
		//测试新增数据 todo
		// addTodo("123");
	}, []);

	//模拟生命周期  componentDidMount  组件挂载完成后执行
	useEffect(() => {
		//请求初始化数据
		async function main() {
			let data = await getAlltodo();
			// console.log(result)
			setTodo(data);
		}
		main();
	}, []);

	return (
		<>
			<div className="todo-container">
				<div className="todo-wrap">
					<Todoheader addTodo={addTodo}></Todoheader>
					<Todomain
						todo={todo}
						removeTodo={removeTodo}
						updateTodo={updateTodo}
					></Todomain>
					<Todofooter
						clearAlltodo={clearAlltodo}
						checkedalltodo={checkedalltodo}
						todo={todo}
					></Todofooter>
				</div>
			</div>
		</>
	);
}
